<script setup>
import { Chart } from '@antv/g2'
import { onMounted, ref, watch } from 'vue'
import { getHomeinfo, getAdventPact } from '@/api/dashboard.js'
import { useRouter } from 'vue-router'
import { putEnterpTableData } from '@/api/businessman.js'
import { hint, Paging } from '@/hooks/hint.js'
const { Confirm, msg } = hint()
const { changePage, home } = Paging()
const router = useRouter()
const inof = ref({}) // 基本数据
const PactUser = ref([])
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    align: 'center'
  },
  {
    title: '企业名称',
    dataIndex: 'enterpriseName',
    align: 'center'
  },
  {
    title: '租赁楼宇',
    dataIndex: 'buildingName',
    align: 'center'
  },
  {
    title: '租赁时间',
    dataIndex: 'Time',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    width: '150px',
    align: 'center'
  }
]
defineOptions({
  name: 'DashboardIdenx'
})
// 获取基础数据
const getinof = async () => {
  const res = await getHomeinfo()
  inof.value = res.data
  // console.log('基本信息', res.data)
}
// 获取临期合同
const getpact = async (params = '') => {
  const res = await getAdventPact(params)
  PactUser.value = res.data
  // console.log('合同', res)
}
// 侦听分页变化
watch(home, (newVal) => {
  console.log('obj 变化了:', newVal)
  getpact(newVal)
})
// 退租
const utEnterpTable = async (id) => {
  try {
    await Confirm('退租不可撤回，是否确认退租当前楼宇?')
    const res = await putEnterpTableData(id)
    msg('success', res.msg)
  } catch (e) {
    if (e === false) return
    msg('error', e.response?.data?.msg)
  }
}
// 图表
const AntvG2 = () => {
  const data = [
    {
      letter: 'A',
      frequency: 0.08167,
      value: 1000
    },
    {
      letter: 'B',
      frequency: 0.01492,
      value: 1000
    },
    {
      letter: 'C',
      frequency: 0.02782,
      value: 1000
    },
    {
      letter: 'D',
      frequency: 0.04253,
      value: 1000
    },
    {
      letter: 'E',
      frequency: 0.12702,
      value: 1000
    },
    {
      letter: 'F',
      frequency: 0.02288,
      value: 1000
    },
    {
      letter: 'G',
      frequency: 0.02015,
      value: 1000
    },
    {
      letter: 'H',
      frequency: 0.06094,
      value: 1000
    },
    {
      letter: 'I',
      frequency: 0.06966
    },
    {
      letter: 'J',
      frequency: 0.00153
    },
    {
      letter: 'K',
      frequency: 0.00772
    },
    {
      letter: 'f',
      frequency: 0.00772
    }
  ]
  const chart = new Chart({
    container: 'container',
    theme: 'classic',
    // height: 300, // 图表宽度
    autoFit: true
  })
  // title
  chart.title('年度收入统计').style({
    fontSize: 16,
    fontWeight: '100',
    textAlign: 'center'
  })
  chart
    .axis('x', { title: null }) // 清除 x 轴标题
    .axis('y', { title: null }) // 清除 y 轴标题
    .interval({ background: 'red' }) // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'letter')
    .encode('y', 'frequency')
    .axis('y', { labelFormatter: 0 * 1000 })
    .encode('size', 15)

  chart.render()
}
onMounted(() => {
  AntvG2()
})
// 发请求
;(async function () {
  await getinof()
  await getpact()
})()
</script>
<template>
  <div class="app">
    <!-- top -->
    <a-row style="margin-bottom: 20px">
      <!-- top左 -->
      <a-col :span="16" style="padding: 20px; background-color: #fff; margin-right: 20px">
        <a-descriptions
          title="园区数据"
          :column="4"
          layout="vertical"
          :colon="false"
          :contentStyle="{ fontSize: '24px', color: '#303035', fontWeight: '500' }"
          :labelStyle="{ fontSize: '14px', color: '#909399' }"
        >
          <a-descriptions-item label="年度累计收费（元）">{{
            inof.annualIncome
          }}</a-descriptions-item>
          <a-descriptions-item label="入驻企业总数（个）">{{
            inof.enterpriseTotal
          }}</a-descriptions-item>
          <a-descriptions-item label="月卡车辆总数（辆）">{{
            inof.monthCardTotal
          }}</a-descriptions-item>
          <a-descriptions-item label="一体杆总数（台）">{{
            inof.chargePoleTotal
          }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- top右 -->
      <a-col :span="7" style="padding: 20px; background-color: #fff">
        <a-descriptions
          title="快捷入口"
          :column="4"
          layout="vertical"
          :colon="false"
          :contentStyle="{ fontSize: '24px', color: '#303035', fontWeight: '500' }"
          :labelStyle="{ fontSize: '14px', color: '#909399' }"
        >
          <a-descriptions-item>
            <div class="righttab" @click="router.push('/addenterprise')">
              <img src="../../assets/add-enterprise.png" class="tabimg" />
              <span>添加企业</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item>
            <div class="righttab" @click="router.push('/system/StaffManage')">
              <img src="../../assets/employee-manage.png" class="tabimg" />
              <span>员工管理</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item>
            <div class="righttab">
              <img src="../../assets/add-bill.png" class="tabimg" />
              <span>添加账单</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item>
            <div class="righttab">
              <img src="../../assets/data-screen.png" class="tabimg" />
              <span>数据大屏</span>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <!-- center -->
    <a-row style="margin-bottom: 20px">
      <!-- 图表 -->
      <a-col
        :span="16"
        style="padding: 20px; background-color: #fff; margin-right: 20px; height: 400px"
      >
        <div id="container" style="width: 100%; height: 100%"></div>
      </a-col>
      <a-col :span="7" style="padding: 20px; background-color: #fff; height: 300px">
        <a-descriptions
          title="设备告警派单"
          :column="4"
          layout="vertical"
          :colon="false"
          :contentStyle="{ fontSize: '24px', color: '#303035', fontWeight: '500' }"
          :labelStyle="{ fontSize: '14px', color: '#909399' }"
        >
          <a-descriptions-item class="centerkts">
            <div class="boxe">
              <a-empty description="空" />
              <a-button
                type="primary"
                shape="round"
                block
                @click="router.push('/pole/warningrecords')"
                >更多 ></a-button
              >
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <!-- bottom -->
    <a-row style="margin-bottom: 20px">
      <!-- b-左 -->
      <a-col :span="16" style="padding: 20px; background-color: #fff; margin-right: 20px">
        <p>临期合同提醒</p>
        <a-table
          :columns="columns"
          :data-source="PactUser.rows"
          :pagination="{
            total: 88,
            current: home.page,
            pageSize: home.pageSize,
            onChange: changePage,
            showTotal: (total) => `共 ${total} 条`,
            pageSizeOptions: ['5', '10', '15', '20']
          }"
        >
          <!-- onChange: changePage -->
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'Time'">
              {{ record.startTime }} 至 {{ record.endTime }}
            </template>
            <template v-if="column.dataIndex === 'operate'">
              <div class="btn2">
                <a-button type="link">续签</a-button>
                <a-button type="link" @click.prevent="utEnterpTable(record.id)">退租</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </a-col>
      <!-- b-右 -->
      <a-col :span="7" style="padding: 20px"> </a-col>
    </a-row>
  </div>
</template>
<style scoped lang="less">
.righttab {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  span {
    font-size: 14px;
    margin-top: 5px;
  }
}
.tabimg {
  width: 44px;
  height: 44px;
}
::v-deep .ant-descriptions-title {
  font-weight: 400;
  font-size: 14px;
}
.app {
  padding: 0 0 20px 20px;
}
// ::v-deep .centerkts {
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }
.boxe {
  width: 100%;
}
.btn2 {
  ::v-deep .ant-btn-link {
    padding: 5px !important;
  }
}
</style>
